<template>
  <div class="flex-div">
    <div class="radio">
      <el-radio-group v-model="myChecked">
        <el-radio v-for="(item,index) in labels" :key="index" :label="item.value">{{ item.label }}</el-radio>
        <el-radio :label="otherInput">其它：</el-radio>
      </el-radio-group>
    </div>
    <div class="input">
      <el-input v-model="otherInput" :disabled="myChecked!==otherInput" size="mini" placeholder="请输入" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'CustomRadio',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    labels: {
      type: Array,
      default: function() {
        return []
      }
    },
    checked: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      myChecked: this.checked,
      otherInput: '',
      flag: false
    }
  },
  watch: {
    checked: {
      handler(newVal, oldVal) {
        this.flag = this.labels.some((item) => {
          return item.value === newVal
        })
        if (!this.flag) {
          this.otherInput = newVal
        } else {
          this.myChecked = newVal
        }
      }
    },
    myChecked: {
      handler(newVal, oldVal) {
        this.$emit('change', newVal)
      },
      deep: true
    },
    otherInput: {
      handler(newVal, oldVal) {
        this.myChecked = newVal
      }
    }
  },
  created() {
    this.flag = this.labels.some((item) => {
      return item.value === this.checked
    })
    if (!this.flag) {
      this.otherInput = this.checked
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-div{
  display: flex;
  flex-direction: row;
  justify-content:start;
  align-items: center;
  > .radio{
    margin: 0;
    line-height: 100%;
    display: flex;
    flex-direction:column;
    justify-content:end;
  }
  > .input{
    ::v-deep .el-input__inner{
      //border-width: 0 0 1px 0;
      border-radius:0;
    }
  }
}
</style>
